<template>
    <div class="upload-container">
        <PageHeader title="文件上传" />
        
        <van-tabs v-model:active="activeTab" animated swipeable>
            <van-tab title="图片上传">
                <ImageUploader />
            </van-tab>
            <van-tab title="日志导入">
                <FileUploader />
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Tabs as VanTabs, Tab as VanTab } from 'vant';
import PageHeader from '@/Pages/compontents/PageHeader.vue';
import ImageUploader from './components/ImageUploader.vue';
import FileUploader from './components/FileUploader.vue';

const activeTab = ref(0);
</script>

<style scoped>
.upload-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

:deep(.van-tabs) {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

:deep(.van-tabs__wrap) {
    padding: 0 16px;
}

:deep(.van-tab) {
    font-size: 16px;
    color: #666;
}

:deep(.van-tab--active) {
    color: #1E9FFF;
    font-weight: 500;
}

:deep(.van-tabs__line) {
    background-color: #1E9FFF;
}

:deep(.van-tabs__content) {
    background: #fff;
}
</style>